<template>
  <div class="home_page">
    <div class="index_pic">
      <img :src="imgPath" alt="img">
    </div>
    <div class="order_num">
      <yd-cell-group>
        <yd-cell-item arrow type="link" href="/order">
          <span slot="left">我的预约单</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    <div class="title_box">
      <div class="title">预约说明</div>
      <div class="box_content">{{ primaryNote }}</div>
    </div>
    <div class="title_box">
      <div class="title">请认真填写表单</div>
      <div class="box_content">
        <yd-flexbox class="label_one">
          <div class="form_label">办理业务：</div>
          <yd-flexbox-item>
            <select class="input" v-model="appointForm.webId" @change="getDateByWebId">
              <option value="">请选择办理点</option>
              <option v-for="item in webIdArr" :key="item.id" :value="item.id">{{ item.webName }}</option>
            </select>
          </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox class="label_one">
          <div class="form_label">预约时间：</div>
          <yd-flexbox-item>
            <select v-model="appointForm.orderDay" @change="getTimeNumByWebIdDate" class="input" style="margin-bottom: .2rem;">
              <option value="">请选择预约时间</option>
              <option v-for="item in orderDayArr" :key="item" :value="item">{{ item }}</option>
            </select>
            <select v-model="appointForm.orderTimeInfo" class="input">
              <option value="">请选择预约时间范围</option>
              <option v-for="item in orderTimeInfoArr" :key="item" :value="item">{{ item }}</option>
            </select>
          </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox class="label_one">
          <div class="form_label">手机号码：</div>
          <yd-flexbox-item>
            <input type="number" v-model="appointForm.telephone" placeholder="请输入手机号码" class="input">
          </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox class="label_one">
          <div class="form_label">姓名：</div>
          <yd-flexbox-item>
            <input type="text" v-model="appointForm.name" placeholder="请输入姓名" class="input">
          </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox class="label_one">
          <div class="form_label">身份证号码：</div>
          <yd-flexbox-item>
            <input type="text" v-model="appointForm.wxId" placeholder="请输入身份证号码" class="input">
          </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox class="label_one">
          <div class="form_label">户口所在乡镇：</div>
          <yd-flexbox-item>
            <select class="input" v-model="appointForm.hometownAddress">
              <option value="" selected>请选择户口所在乡镇</option>
              <option v-for="item in hometownAddressArr" :key="item.id" :value="item.id">{{ item.name }}</option>
            </select>
          </yd-flexbox-item>
        </yd-flexbox>
      </div>
    </div>
    <div class="submit_button">
      <yd-button size="large" type="primary" @click.native="handleSubmit">提交预约</yd-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getParams } from '@/libs/tools'
import { getImgExplain, getWebInfoSelect, getHouseholdRegisterSelect, getWorkDaySelect, getPeopleNumSelect, addStudentOrderInfo } from '@/api/appoint'
let openId = window.sessionStorage.getItem('openId')

export default {
  name: 'home',
  data () {
    return {
      imgPath: '',
      primaryNote: '',
      webIdArr: [],
      orderDayArr: [],
      orderTimeInfoArr: [],
      hometownAddressArr: [],
      appointForm: {
        webId: '',
        orderDay: '',
        orderTimeInfo: '',
        telephone: '',
        name: '',
        wxId: '',
        hometownAddress: ''
      }
    }
  },
  mounted () {
    this.init();
  },
  methods: {
    // 获取select选项
    init () {
      axios.all([getImgExplain(), getWebInfoSelect(), getHouseholdRegisterSelect()])
      .then(axios.spread((imgExplain, webInfo, household) => {
        this.imgPath = imgExplain.data.imgPath; // 图片
        this.primaryNote = imgExplain.data.primaryNote; // 说明
        this.webIdArr = webInfo.data; // 办理网点
        this.hometownAddressArr = household.data; // 户籍地
      }));
    },
    // 根据网点Id获取预约日期
    getDateByWebId () {
      this.orderTimeInfoArr = [];
      this.appointForm.orderDay = '';
      this.appointForm.orderTimeInfo = '';
      if (this.appointForm.webId !== '') {
        getWorkDaySelect(this.appointForm.webId).then(res => {
          if (res.data.length > 0) {
            this.orderDayArr = res.data.map(item => item.workDay)
          } else {
            this.orderDayArr = []
          }
        })
      } else {
        this.orderDayArr = []
      }
    },
    // 根据网点Id、日期获取预约名额
    getTimeNumByWebIdDate () {
      this.appointForm.orderTimeInfo = '';
      if (this.appointForm.webId === '') {
        this.$dialog.toast({
          mes: '请选择办理业务点',
          timeout: 1500
        });
      } else if (this.appointForm.orderDay === '') {
        this.orderTimeInfoArr = [];
      } else {
        getPeopleNumSelect(this.appointForm.webId, this.appointForm.orderDay).then(res => {
          this.orderTimeInfoArr = res.data;
        })
      }
    },
    // 提交预约
    handleSubmit () {
      console.log(this.appointForm);
      let verifResult = Object.values(this.appointForm).every((item,index,arr) => {
        return item !== ''
      });
      let reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/; // 手机号验证
      let regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 身份证号码验证
      if (!verifResult) {
        this.$dialog.toast({
          mes: '请完善填写信息',
          timeout: 1500
        });
      } else {
        if (!reg.test(this.appointForm.telephone)) {
          this.$dialog.toast({
            mes: '请输入正确的手机号码',
            timeout: 1500
          });
        } else if (!regIdCard.test(this.appointForm.wxId)) {
          this.$dialog.toast({
            mes: '请输入正确的身份证号码',
            timeout: 1500
          });
        } else {
          this.appointForm.openId = openId;
          addStudentOrderInfo(this.appointForm).then(res => {
            if (res.code === 200) {
              this.$dialog.alert({
                mes: '预约成功！',
                callback: () => {
                  this.$router.push('/order');
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.msg,
                timeout: 1500
              });
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home_page {
  padding: .2rem;
  .index_pic {
    overflow: hidden;
    margin-bottom: .2rem;
    max-height: 218px;
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      border: 0;
    }
  }
  .order_num {
    margin-bottom: .2rem;
  }
  .title_box {
    margin-bottom: .2rem;
    border: 1px solid #e1e5ec;
    .title {
      padding: .2rem;
      font-size: .28rem;
      background-color: #e1e5ec;
    }
    .box_content {
      padding: .2rem;
      background-color: #fff;
      .label_one {
        margin-bottom: .2rem;
      }
      .form_label {
        width: 2.4rem;
        height: .6rem;
        line-height: .6rem;
      }
      .input {
        padding: 0 .2rem;
        width: 100%;
        height: .6rem;
        line-height: .5rem;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>
